Zum Hauptinhalt springen

AR Clip SDK

Überblick

AR Clip ermöglicht App-Clip-basierte AR-Erlebnisse: WebGL-Inhalte werden gestreamt, während ARKit und die WebAR³ VPS-Engine die Lokalisierung übernehmen. Folgen Sie dem Immersal-Stil: Voraussetzungen prüfen, Paket einbinden, Szene vorbereiten, VPS starten und die WebGL-Build hochladen.

Voraussetzungen

Hinweis: Im Unity-Editor sind viele AR-Clip-APIs hinter Application.isEditor deaktiviert. Für echtes Verhalten WebGL bauen und mit der AR-Clip-App testen.

Paket installieren

  1. Window → Package Manager öffnen.
  2. + → Add package from Git URL… auswählen.
  3. https://github.com/WebAR-Studio/arclip_sdk.git einfügen und bestätigen.

Vor dem Import eventuell vorhandenen Ordner Assets/ARLib löschen, um doppelte Typen zu vermeiden:

error CS0433: The type 'ARLibTester' exists in both 'ARLib' and 'Assembly-CSharp'

Samples importieren

In Package Manager → AR Clip → Samples:

  • WebGLTemplates importieren und den Ordner in Assets/ kopieren, damit er unter Project Settings → Player → WebGL Template auswählbar ist.
  • TransparentBackground importieren und TransparentBackground.jslib nach Assets/Plugins verschieben, damit WebGL transparent rendert.

Szene vorbereiten

  1. Leeres GameObject ARClipController anlegen.
  2. ARLibController hinzufügen und renderCamera zuweisen.
  3. Camera-Komponente deaktivieren, Clear Flags = Solid Color setzen und Farbe RGBA(0,0,0,0) wählen.
  4. Optional ARLibTester aus den Samples aktivieren, um Editor-Events zu simulieren.

Minimaler Bootstrap-Script

using UnityEngine;
using ARLib;

public class ARClipBootstrap : MonoBehaviour
{
[SerializeField] private Camera renderCamera;

private void OnEnable()
{
ARLibController.Initialized += HandleInitialized;
ARLibController.VPSPositionUpdated += HandleVpsPose;
}

private void OnDisable()
{
ARLibController.Initialized -= HandleInitialized;
ARLibController.VPSPositionUpdated -= HandleVpsPose;
}

private void Start()
{
ARLibController.SetRenderCamera(renderCamera);
ARLibController.Initialize();
}

private void HandleInitialized()
{
ARLibController.EnableCamera();
ARLibController.EnableAR();
ARLibController.EnableSurfaceTracking("horizontal");
}

private void HandleVpsPose(VPSPoseData pose)
{
Debug.Log($"VPS pose: {pose.Position}");
}
}

VPS-Lokalisierung starten

VPS nach der Initialisierung konfigurieren und starten:

var settings = new VPSSettings
{
apiKey = "your-api-key",
locationIds = new[] { "your-location-id" }
};

ARLibController.SetupVPS(settings);
ARLibController.StartVPS();

Wichtige Events:

  • ARLibController.VPSInitialized signalisiert, dass VPS bereit ist.
  • ARLibController.VPSPositionUpdated liefert Lokalisierungsposten.
  • ARLibController.OnVPSErrorHappened meldet Fehlertexte.

Timing-Helfer wie SetSendPhotoDelay, SetGpsAccuracyBarrier und SetFirstRequestDelay steuern die Anfragefrequenz.

Tracking-Module

  • Bilder via AddTrackingImage registrieren und auf TrackedImagesArrayUpdate warten, bevor Tracking aktiviert wird.
  • EnableSurfaceTracking("horizontal" | "vertical" | "both") startet die Ebenenerkennung; Ergebnisse kommen über SurfaceTrackingUpdated.

Build- & Upload-Workflow

  1. WebGL-Template wählen: In Project Settings → Player → WebGL → Resolution and Presentation den kopierten Template auswählen.
  2. Build erstellen: File → Build Settings → WebGL → Build.
  3. Zip erstellen: Build-Inhalt zippen, index.html muss im Wurzelverzeichnis liegen.
  4. Upload: Zip über https://cdn.mobile.web-ar.studio/clip/pages/zip_uploader.html hochladen.
  5. Test: QR-Code mit der AR Clip iOS-App scannen (https://apps.apple.com/app/ar-clip/id6742754238).

Fehlerbehebung

  • Kein Kamerabild: Prüfen, ob TransparentBackground.jslib in Assets/Plugins liegt und die Kamera korrekt gesetzt sowie deaktiviert ist.
  • Keine AR-Events im Editor: erwartetes Verhalten – ARLibTester nutzen oder WebGL-Build testen.
  • Doppelte Typen: sicherstellen, dass der alte Ordner ARLib vor dem Import entfernt wurde.